<template>
	<view class="pa-b-100">
		<!--我的故事-->
		<view class="bg-fff pa-20">
			<view class="justify-content-item align-content-item p-b-20">
				<view class="tn-flex tn-flex-col-center"
					style="border-radius: 100rpx;padding: 20rpx 20rpx 20rpx 20rpx;width: 100%;background-color: rgba(248, 247, 248, 0.9);">
					<text
						class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
					<input class="justify-content-item" placeholder="故事名称" name="input"
						placeholder-style="color:#AAAAAA" style="width: 90%;"></input>
				</view>
			</view>
			<view class="b-t-1-F5">
				<tn-tabs :list="tablist" :current="current"  @change="change" :isScroll="false"  activeColor="#fbbd12" name="tab_name" backgroundColor="#FFFFFF"  :barWidth="150"></tn-tabs>
			</view>
		</view>
		<view class="ma-20 pa-20 bg-fff b-r-15" v-for="(item,index) in list" :key="index" @click="btndetail(item)">
			<view class="flex f-between f-center pa-b-30 pa-t-10  pa-lr-20">
				<view class="flex f-center">
					<view class="font-bold">‌{{item.name}}</view>
					<view :class="index%2===0?'status1 tn-text-sm h50':'status2 tn-text-sm h50'">{{index%2===0?"正式":"在途"}}</view>
				</view>
				<view :class="index%2===0?'follow1 tn-text-sm h50':'follow2 tn-text-sm h50'">{{index%2===0?"关注":"取消关注"}}</view>
			</view>
			<view class="flex f-between pa-tb-40 b-t-1-F5 t-center">
				<view class="width30">
					<view>总积分</view>
					<view class="ma-t-20  ">￥8777</view>
				</view>
				<view class="width30">
					<view>已提积分</view>
					<view class="ma-t-20  ">￥177</view>
				</view>
				<view class="width30">
					<view>剩余积分</view>
					<view class="ma-t-20  ">￥77</view>
				</view>
			</view>
			<view class="flex f-between pa-tb-40 t-center">
				<view class="width30">
					<view>积分价值</view>
					<view class="ma-t-20  ">￥8777</view>
				</view>
				<view class="width30">
					<view>已提金额</view>
					<view class="ma-t-20  ">￥177</view>
				</view>
				<view class="width30">
					<view>市值</view>
					<view class="ma-t-20  tn-color-red">￥77</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				tablist: [{
					tab_name: '已达标'
				}, {
					tab_name: '未达标'
				}],
				current:0,
				list:[{
					name:"醇香麦芽精酿啤酒‌500ml"
				},{
					name:"‌沁爽青柠气泡水‌"
				}]
			}
		},
		mounted() {
			_this = this;
		},
		methods: {
			btndetail(val){
				_this.utilNav.navigateTo("/pages/story/details")
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style>
	.h50{
		height: 50rpx;
		line-height: 50rpx;
	}
	.status1{
		background-color: #70b603;
		color: #fff;
		padding: 0rpx 10rpx;
		border-radius: 15rpx;
		margin-left: 20rpx;
	}
	.status2{
		background-color: #f59a23;
		color: #fff;
		padding: 0rpx 10rpx;
		border-radius: 15rpx;
		margin-left: 20rpx;
	}
	.follow1{
		border: 1px solid #02A7F0;
		color: #02A7F0;
		border-radius: 15rpx;
		padding: 0rpx 20rpx;
	}
	.follow2{
		border: 1px solid #a1a1a1;
		color: #a1a1a1;
		border-radius: 15rpx;
		padding: 0rpx 20rpx;
	}
</style>
